<template>
    <div>
        <div>
            <van-nav-bar title="春雨医生" left-text="" left-arrow @click="onClickLeft" />
            <div class="title">
                <div>
                    <h3 style="font-weight: 900;font-size: 18px;margin-left: 25px;margin-top: 10px;">需要分清自己的皮肤类型</h3>
                </div>
                <div>
                    <img src="../../assets//duo.jpg" alt="" style="width: 100px;height: 40px;margin-left: 12px;">
                </div>
                <div class="tiao" @click="Toindexs">
                    <p>15天护肤计划</p> <span>进入计划目录</span>
                </div>
                <div class="jz">
                    <span>缓解肩颈疲劳酸痛</span>

                </div>
                <div class="zj">
                    拯救肩颈酸痛,这样练完太舒服啦
                </div>
                <img src="../../assets//shu.jpg" alt="" class="HandleImgs">
                <div>
                    <video src="../../assets//黄霄雲 - 星辰大海(2022河南卫视“青春万岁”五四青年节特别节目).mkv" controls autoplay
                        class="video"></video>
                </div>
            </div>
            <div class="finish1">
                <div class="finish" sticky>
                    点击完成
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}
const Toindexs = () => {
    router.push('/ji')
}
</script>

<style lang="scss" scoped>
.title {
    width: 100%;
    height: 1000px;
    background-color: #ffff;
}

.tiao {
    width: 95%;
    height: 70px;
    background-color: #f4f6f7;
    position: relative;

    p {
        line-height: 70px;
        margin-left: 18px;
        font-size: 18px;
        position: absolute;
    }

    span {
        line-height: 70px;
        right: 30px;
        position: absolute;
    }
}

.video {
    width: 80%;
    height: 500px;
    position: absolute;
    top: 155px;
    left: 45px;
}

.jz {
    width: 87%;
    position: absolute;
    top: 235px;
    left: 20px;
    height: 40px;
    background: linear-gradient(to right, #0eba89, #22cc5c);
    line-height: 40px;
    color: #fff;
    margin-left: 20px;
    border-radius: 10px 10px 0 0;

    span {
        margin-left: 10px;
    }
}

.zj {
    margin-left: 50px;
    margin-top: 55px;
    color: #c3c3c3;

}
.HandleImgs{
    position: absolute;
    top: 225px;
}
   .finish1{
            width: 100%;
            height: 80px;
            background-color:white;
             
             .finish{
            width: 95%;
            height: 40px;
            background:#1cc86b;
            line-height: 40px;
            margin-left: 15px;
            margin-top: 10px;
            text-align: center;
            color: #fff;
            font-weight: 850;
            position: fixed;
            bottom: -23px;
            margin-bottom: 30px;
         }
        }
</style>